<template>
  <div class="addMngWrapper">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="添加秒杀" name="first" />
      </el-tabs>
    </div>
    <div class="content">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :inline="false"
        class="demo-form-inline mr-15"
        :rules="rules"
        label-width="150px"
      >
        <el-form-item label="起始时间：" prop="start_time">
          <div class="d-flex" style="width: 500px">
            <el-date-picker
              v-model="value"
              :disabled="checked"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="请输入开始日期"
              end-placeholder="请输入结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              @change="handleChange"
            />
            <el-button type="primary" @click="submit">保存</el-button>
          </div>
        </el-form-item>
        <el-form-item label="订单自动关闭时间：" prop="auto_close_time">
          <el-input v-model="ruleForm.auto_close_time" class="el-80" :disabled="checked" />
          <span class="yuan">分钟</span>
        </el-form-item>
        <el-form-item v-if="!checked" label="选择商品：" prop="price" class="select-mng">
          <div class="d-flex" style="width: 100%">
            <el-button type="primary" class="add" @click="add">添加商品</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div v-if="seckillList.length" class="seckill-goods">
        <el-table :data="seckillList" style="width: 100%" border>
          <el-table-column label="图片" width="180">
            <template slot-scope="scope">
              <div>
                <el-image style="width: 100px; height: 100px" :src="scope.row.img_show" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="price" label="现价" />
          <el-table-column label="秒杀价">
            <template slot-scope="scope">
              <div>
                {{ scope.row.seckill_price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="秒杀库存">
            <template slot-scope="scope">
              <div>
                {{ scope.row.seckill_kucun }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="剩余秒杀库存" prop="remain_kucun" />
          <el-table-column label="每人限购" prop="limit_num" />
          <el-table-column label="订单数" prop="order_num" />
          <el-table-column label="销售额" prop="sale_amount" />
          <el-table-column v-if="!checked" label="操作" width="150">
            <template slot-scope="scope">
              <div class="d-flex">
                <el-button type="primary" @click="editSpecGoodsItem(scope)">编辑</el-button>
                <el-button type="primary" @click="remove(scope)">移除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <dialog-mng
      ref="dialogMng"
      :seckill-id="seckillId"
      :seckill-item="seckillItem"
      :is-edit="isEdit"
      :edit-name="editName"
      @selectSeckillGoods="handleSelectSeckillGoods"
    />
  </div>
</template>
<script>
import DialogMng from './dialog-mng'
import {
  setSecKillTime,
  getSeckillGoods,
  editSeckillGoods,
  getSecKillCommodityInfo,
  editSeckill,
  removeSeckillItem
} from '@/api/seckill'
const ERR_OK = 200
export default {
  components: {
    DialogMng
  },
  data() {
    return {
      activeName: 'first',
      value: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      ruleForm: {
        start_time: '',
        end_time: '',
        auto_close_time: 30
      },
      rules: {
        auto_close_time: [
          { required: true, message: '请选择自动关闭时间', trigger: 'blur' }
        ]
      },
      seckillList: [],
      seckillItem: [],
      is_can: false,
      seckillId: '',
      isEdit: false,
      editName: '选择商品',
      showSaveBtn: true,
      checked: false
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (newVal.query.id) {
          this.seckillId = newVal.query.id
          this.isEdit = true
          this.is_can = true
          this.showSaveBtn = false
          this.ruleForm.id = newVal.query.id
          this._editSeckill(newVal.query.id)
        }
        if (newVal.query.checked) {
          this.checked = true
        } else {
          this.checked = false
        }
      }
    }
  },
  methods: {
    remove(scope) {
      this._removeSeckillItem(scope.row.id).then(() => {
        this._getSeckillGoods(this.seckillId)
      })
    },
    editSpecGoodsItem(scope) {
      this.$refs.dialogMng.show()
      this.isEdit = true
      if (this.isEdit) {
        this._getSecKillCommodityInfo(scope.row.id)
        this.editName = '编辑商品'
      }
    },
    handleSelectSeckillGoods() {
      if (!this.isEdit) {
        this._getSeckillGoods(this.seckillId)
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(val) {
      console.log(val)
      if (val) {
        this.ruleForm.start_time = val[0]
        this.ruleForm.end_time = val[1]
      }
    },
    add() {
      if (this.is_can) {
        this.$refs.dialogMng.show()
        this.isEdit = false
        this.editName = '选择商品'
      } else {
        this.$message({
          message: '请先保存',
          type: 'warning',
          showClose: true
        })
      }
    },
    submit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this._setSecKillTime(this.ruleForm).then(() => {
            this.is_can = true
          })
        }
      })
    },
    _setSecKillTime({ id, start_time, end_time, auto_close_time }) {
      return setSecKillTime({ id, start_time, end_time, auto_close_time })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            this.ruleForm.id = res.data.id
            this.seckillId = res.data.id
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getSeckillGoods(id) {
      getSeckillGoods(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.seckillList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _editSeckillGoods({ id, seckill_price, seckill_kucun }) {
      editSeckillGoods({ id, seckill_price, seckill_kucun })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getSecKillCommodityInfo(id) {
      getSecKillCommodityInfo(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.seckillItem = [res.data]
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _editSeckill(id) {
      editSeckill(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.seckillList = res.data.commodity_info
            this.start_time = res.data.start_time
            this.end_time = res.data.end_time
            this.value = [res.data.start_time, res.data.end_time]
            this.ruleForm.start_time = res.data.start_time
            this.ruleForm.end_time = res.data.end_time
            this.ruleForm.auto_close_time = res.data.auto_close_time
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _removeSeckillItem(id) {
      return removeSeckillItem(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.$message({
              message: res.message,
              showClose: true,
              type: 'success'
            })
            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
.addMngWrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    margin-top: 10px;
  }
  .content {
  }
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
.el-80 {
  width: 120px;
}
.yuan {
  position: absolute;
  top: 0;
  right: 7px;
  color: #101010 !important;
}
.el-form /deep/ .el-form-item__content {
  width: 120px;
}
.d-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-mng /deep/ .el-form-item__content {
  width: 85%;
}
</style>
